<template>
  <div class="xhhzcx_box">
    <header-comm></header-comm>
    <!-- 表格 -->
    <div class="bcg left_bcg">
      <div class="hedlist">
        <div class="head_box">
          <div class="sele">
            <!-- <span>型号规格：</span> -->
            <a-auto-complete
              v-model="xl"
              :data-source="XlData"
              allowClear
              class="global-search sele_input"
              @search="onXLSearch"
              @select="onXLSelect"
              size="large"
              placeholder="请输入型号规格"
            >
              <template slot="XlData">
                <a-select-option v-for="(xl,i) in XlData" :key="i">{{xl}}</a-select-option>
              </template>
              <a-input>
                <a-button slot="suffix" style="margin-right: -12px" class="search-btn" size="large">
                  <a-icon type="search" />
                </a-button>
              </a-input>
            </a-auto-complete>
          </div>
          <!-- <div class="sele">
                        <a-auto-complete v-model="sccjc" :data-source="sccjcData" allowClear  class="global-search sele_input"     @search="onSccjcSearch" @select="onSccjcSelect" size="large" placeholder="请输入品牌" >
                        <template slot="sccjcData">
                            <a-select-option v-for="(sccjc,i) in sccjcData" :key="i" >
                                {{sccjc}}
                            </a-select-option>
                        </template>
                        <a-input>
                            <a-button
                            slot="suffix"
                            style="margin-right: -12px"
                            class="search-btn"
                            size="large"
                            >
                            <a-icon type="search" />
                            </a-button>
                        </a-input>
                        </a-auto-complete>
          </div>-->
          <!-- <div class="sele">
                        <a-auto-complete v-model="xlqz" :data-source="spmcData" allowClear  class="global-search sele_input"      @search="onSpmcSearch" @select="onSpmcSelect" size="large" placeholder="请输入商品名称" >
                        <template slot="spmcData">
                            <a-select-option v-for="(spmc,i) in spmcData" :key="i" >
                                {{spmc}}
                            </a-select-option>
                        </template>
                        <a-input>
                            <a-button
                            slot="suffix"
                            style="margin-right: -12px"
                            class="search-btn"
                            size="large"
                            >
                            <a-icon type="search" />
                            </a-button>
                        </a-input>
                        </a-auto-complete>
          </div>-->
          <div class="sele">
            <!-- <span>库房名称：</span> -->
            <!-- <a-input  style="width: 170px" v-model="kfmc"  @change="onKfmcSearch" /> -->
            <a-auto-complete
              v-model="kfmc"
              :data-source="kfmcData"
              allowClear
              class="global-search sele_input"
              @search="onKfmcSearch"
              @select="onKfmcSelect"
              size="large"
              placeholder="请输入库房名称"
            >
              <template slot="kfmcData">
                <a-select-option v-for="(kfmc,i) in kfmcData" :key="i">{{kfmc}}</a-select-option>
              </template>
              <a-input>
                <a-button slot="suffix" style="margin-right: -12px" class="search-btn" size="large">
                  <a-icon type="search" />
                </a-button>
              </a-input>
            </a-auto-complete>
          </div>
          <div class="sele">
            <span>归属公司：</span>
            <a-select v-model="gsbm_val" @change="handleGsbmChange" class="sele_input">
              <a-select-option :value="gs" v-for="(gs,i) in gsdata" :key="i">{{gs}}</a-select-option>
            </a-select>
          </div>
        </div>
      </div>
      <div class="xhhzcx_table">
        <a-table
          @change="handleChangelist"
          :loading="loading"
          :columns="columns"
          :pagination="pagination"
          :dataSource="data"
          :scroll="{ x:1600}"
          :rowKey="(record,index)=>{return index}"
        >
          <!-- 商品名称搜索 -->
          <div
            slot="filterSpmcDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            class="dropdown_all"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              placeholder="搜索商品名称"
              v-model="xlqz"
              class="dropdown_input"
              @change="onSpmcSearch"
              @pressEnter="onSpmcSearch"
              allowClear
            />

            <a-button size="small" class="dropdown_btn" @click="onSpmcClear">清空</a-button>
            <a-button
              type="primary"
              icon="search"
              size="small"
              class="dropdown_btn dropdown_btn1"
              @click="onSpmcSearch"
            >搜索</a-button>
          </div>
          <a-icon
            slot="filterIcon"
            slot-scope="filtered"
            type="search"
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
          <!-- 品牌搜索 -->
          <div
            class="dropdown_all"
            slot="filterSccjcDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              placeholder="搜索品牌"
              v-model="sccjc"
              class="dropdown_input"
              @change="onSccjcSearch"
              @pressEnter="onSccjcSearch"
              allowClear
            />

            <a-button size="small" class="dropdown_btn" @click="onSccjcClear">清空</a-button>
            <a-button
              type="primary"
              icon="search"
              size="small"
              class="dropdown_btn dropdown_btn1"
              @click="onSccjcSearch"
            >搜索</a-button>
          </div>
          <a-icon
            slot="filterIcon"
            slot-scope="filtered"
            type="search"
            :style="{ color: filtered ? '#108ee9' : undefined }"
          />
          <template slot="XLqz" slot-scope="text, record,">
            <div
              style="overflow: hidden;text-overflow: ellipsis; width:100px; white-space: nowrap;"
            >
              <a-tooltip
                placement="topLeft"
                :title="record.XLqz"
                arrow-point-at-center
              >{{record.XLqz}}</a-tooltip>
            </div>
          </template>
          <template slot="XL" slot-scope="text, record,">
            <div
              style="overflow: hidden;text-overflow: ellipsis; width:100px; white-space: nowrap;"
            >
              <a-tooltip placement="topLeft" :title="record.XL" arrow-point-at-center>{{record.XL}}</a-tooltip>
            </div>
          </template>
          <template slot="sccjc" slot-scope="text, record,">
            <div
              style="overflow: hidden;text-overflow: ellipsis; width:100px; white-space: nowrap;"
            >
              <span>{{record.sccjc}}</span>
            </div>
          </template>
          <template slot="KCSL" slot-scope="text, record,">
            <div>
              <span class="sl_style">{{record.KCSL}}</span>
            </div>
          </template>
          <template slot="jcsl" slot-scope="text, record,">
            <div>
              <span class="sl_style">{{record.jcsl}}</span>
            </div>
          </template>
          <template slot="paijia" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.paijia}}</span>
            </div>
          </template>
          <template slot="LSJ" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.LSJ}}</span>
            </div>
          </template>
          <template slot="PFJ" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.PFJ}}</span>
            </div>
          </template>
          <template slot="ZDJ" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.ZDJ}}</span>
            </div>
          </template>
          <template slot="hsj" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.hsj}}</span>
            </div>
          </template>
          <template slot="qycbj" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.qycbj}}</span>
            </div>
          </template>
          <template slot="pjhsj" slot-scope="text, record,">
            <div>
              <span class="jg_style">{{record.pjhsj}}</span>
            </div>
          </template>
        </a-table>
        <!-- <a-pagination v-if="isShow"
                    :total="totalNum"
                    :show-total="total => `共${total} 条数据`"
                    @change="onPageChange"
                    :page-size="pagination.defaultPageSize"
        />-->
      </div>
    </div>
    <rightnav></rightnav>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../../header-comm/header";
import rightnav from "../rightnav.vue";

// 引入表格的列
const columns = [
  {
    title: "商品名称",
    dataIndex: "XLqz",
    className: "XLQZ_colme",
    fixed: "left",
    scopedSlots: {
      customRender: "XLqz",
      filterDropdown: "filterSpmcDropdown",
      filterIcon: "filterIcon"
    }
  },
  {
    title: "型号规格",
    dataIndex: "XL",
    fixed: "left",
    width: 150,
    scopedSlots: { customRender: "XL" },
    lassName: "colme"
  },
  {
    title: "品牌",
    dataIndex: "sccjc",
    scopedSlots: {
      filterDropdown: "filterSccjcDropdown",
      filterIcon: "filterIcon"
    }
  },
  {
    title: "数量",
    dataIndex: "KCSL",
    //  width:150,
    scopedSlots: { customRender: "KCSL" }
  },
  {
    title: "包装",
    dataIndex: "CPBZ",
    // width:150,
    className: "colme"
  },
  {
    title: "产地",
    dataIndex: "sccd",
    // width:150,
    className: "colme"
  },

  {
    title: "计量单位",
    dataIndex: "JLDW"
    // width:150,
  },
  {
    title: "库房名称",
    dataIndex: "KFMC",
    // width:150,ellipsis: true
    scopedSlots: { customRender: "KFMC" }
  },
  {
    title: "货位名称",
    dataIndex: "HWMC"
    // width:150,
  },
  {
    title: "预定数量",
    dataIndex: "jcsl",
    // width:150,
    scopedSlots: { customRender: "jcsl" }
  },
  {
    title: "牌价",
    dataIndex: "paijia",
    // width:150,
    scopedSlots: { customRender: "paijia" }
  },
  {
    title: "零售价",
    dataIndex: "LSJ",
    // width:150,
    scopedSlots: { customRender: "LSJ" }
  },
  {
    title: "批发价",
    dataIndex: "PFJ",
    // width:150,
    scopedSlots: { customRender: "PFJ" }
  },
  {
    title: "最低价",
    dataIndex: "ZDJ",
    // width:150,
    scopedSlots: { customRender: "ZDJ" }
  },
  {
    title: "进货价格",
    dataIndex: "hsj",
    // width:150,
    scopedSlots: { customRender: "hsj" }
  },
  {
    title: "核定成本价",
    dataIndex: "qycbj",
    // width:150,
    scopedSlots: { customRender: "qycbj" }
  },
  {
    title: "库存平均进价",
    dataIndex: "pjhsj",
    scopedSlots: { customRender: "pjhsj" }
  }
];

export default {
  data() {
    return {
      // 表格数据
      data: null,
      columns,
      loading: true,
      //数据库名称
      database: "ERP2_BEARING",
      // ip地址
      ip: "122.112.240.180",
      ceqybm: "7401",
      gsdata: [],
      pagination: {
        defaultPageSize: 10,
        current: 1,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      // 型号
      xl: "",
      // 品牌
      sccjc: "",
      // 库房名称
      kfmc: "",
      // 商品名称
      xlqz: "",
      // 公司编码
      gsbm: "",
      // 所有编码
      allbm: "",
      gsbm_val: "",
      // 总条数
      totalNum: 0,
      // 控制页脚隐藏
      isShow: true,
      // 型号数据数组
      XlData: [],
      // 商品名称模糊查询数组
      spmcData: [],
      // 品牌模糊查询数组
      sccjcData: [],
      // 库房名称模糊查询数组
      kfmcData: [],
      // 价格权限
      jgqx: ""
    };
  },
  components: {
    headerComm,
    rightnav
  },
  methods: {
    // 型号搜索触发
    onXLSelect(e) {
      this.xl = e;
      this.onSearch();
    },
    onXLSearch(e) {
      this.xl = e;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // console.log("防抖...");
        this.onSearch();
        this.timer = undefined;
      }, 500);
    },
    // 品牌搜索触发
    onSccjcClear() {
      this.sccjc = "";
      this.pagination.current = 1;
      this.onSearch();
    },
    onSccjcSearch(e) {
      this.sccjc = e.target.value;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // console.log("防抖...");
        this.pagination.current = 1;
        this.onSearch();
        this.timer = undefined;
      }, 500);
    },
    // 商品名称
    onSpmcClear(e) {
      this.xlqz = "";
      this.pagination.current = 1;
      this.onSearch();
      // this.getKfmc(e);
    },
    onSpmcSearch(e) {
      this.xLqz = e.target.value;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // console.log("防抖...");
        this.pagination.current = 1;
        this.onSearch();
        this.timer = undefined;
      }, 100);
    },
    // 库房名称搜索触发
    onKfmcSelect(e) {
      this.kfmc = e;
      this.onSearch();
    },
    onKfmcSearch(e) {
      this.kfmc = e;
      this.getKfmc(e);
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // console.log("防抖...");
        this.onSearch();
        this.timer = undefined;
      }, 100);
    },
    // 搜索查询
    onSearch() {
      this.handleChangelist(this.pagination);
    },
    // 分页数据展示
    onPageChange(current) {
      console.log(current);
      this.pagination.current = current;
      this.handleChangelist(this.pagination);
    },
    // 获取品牌筛选数据列表
    getSccjc(e) {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_publicDataList.php",
          qs.stringify({
            pageSize: this.pagination.defaultPageSize,
            mc: "品牌",
            keywords: e,
            token: sessionStorage.getItem("smt_token")
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.result) {
            let sccjscsj = [];
            for (var i = 0; i < res.data.result.length; i++) {
              sccjscsj.push(res.data.result[i].mc);
            }
            // 品牌筛选
            this.sccjcData = sccjscsj;
            this.sccjcData = new Set(sccjscsj);
            this.sccjcData = Array.from(this.sccjcData);
            this.sccjcData = this.sccjcData.filter(function(s) {
              return s && s.trim();
            });
          } else {
            this.sccjcData = [];
          }
        });
    },
    // 获取库房筛选数据列表
    getKfmc(e) {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_publicDataList.php",
          qs.stringify({
            pageSize: this.pagination.defaultPageSize,
            mc: "库房名称",
            keywords: e,
            token: sessionStorage.getItem("smt_token")
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.result) {
            let kfmcsj = [];
            for (var i = 0; i < res.data.result.length; i++) {
              kfmcsj.push(res.data.result[i].mc);
            }
            // 品牌筛选
            this.kfmcData = kfmcsj;
            this.kfmcData = new Set(kfmcsj);
            this.kfmcData = Array.from(this.kfmcData);
            this.kfmcData = this.kfmcData.filter(function(s) {
              return s && s.trim();
            });
          } else {
            this.sccjcData = [];
          }
        });
    },
    // 表格数据
    handleChangelist(pagination) {
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_xhmxcx.php?page=" +
            pagination.current +
            "&pageSize=" +
            pagination.defaultPageSize +
            "&type=xhmxcx",
          qs.stringify({
            xl: this.xl,
            token: sessionStorage.getItem("smt_token"),
            sccjc: this.sccjc,
            kfmc: this.kfmc,
            xlqz: this.xlqz,
            allbm: this.allbm + "",
            gsbm: this.gsbm,
            jgqx: this.jgqx
          })
        )
        .then(res => {
          if (res.data.result) {
            this.data = res.data.result;
            this.loading = false;
            this.isShow = true;
            // console.log(this.data)
            this.pagination.total = Number(res.data.totalNum);
            let xlsj = [];
            let spmcsj = [];

            let kfmcsj = [];
            for (var i = 0; i < this.data.length; i++) {
              xlsj.push(this.data[i].XL);
              spmcsj.push(this.data[i].XLqz);
              // kfmcsj.push(this.data[i].KFMC);
            }
            // // 库房名称筛选
            // this.kfmcData=kfmcsj;
            // this.kfmcData=new Set(kfmcsj)
            // this.kfmcData=Array.from(this.kfmcData);
            // this.kfmcData=this.kfmcData.filter(function(s){
            //     return s && s.trim();
            // })

            // 商品名称筛选
            this.spmcData = spmcsj;
            this.spmcData = new Set(spmcsj);
            this.spmcData = Array.from(this.spmcData);
            this.spmcData = this.spmcData.filter(function(s) {
              return s && s.trim();
            });
            // this.spmcData=Array.from(this.spmcsj);
            // console.log(this.spmcData)
            // 型号筛选
            this.XlData = xlsj;
            this.XlData = new Set(this.XlData);
            this.XlData = Array.from(this.XlData);
            this.XlData = this.XlData.filter(function(s) {
              return s && s.trim();
            });
          } else {
            this.totalNum = Number(0);
            this.data = [];
            this.XlData = [];
            this.spmcData = [];
            this.sccjcData = [];
            this.kfmcData = [];
            this.loading = false;
            this.isShow = false;
          }
        });
    },

    getgsbm() {
      let xhqxdata = JSON.parse(sessionStorage.getItem("xhqxdata"));
      if (xhqxdata.length > 1) {
        this.gsdata = xhqxdata;
        this.gsdata.unshift("查所有");
      } else {
        this.gsdata = [];
        console.log(this.gsdata);
      }
      this.gsbm_val = xhqxdata[0];
      this.allbm = this.gsdata;
      this.handleChangelist(this.pagination);
    },
    // 公司编码选择
    handleGsbmChange(value) {
      console.log(value);
      this.gsbm = value;
      console.log(this.gsbm);
      this.onSearch();
    }
  },
  created() {
    this.getSccjc();
    this.getKfmc();

    // 权限价格--限制显示或隐藏---js--开始
    var jgqx = sessionStorage.getItem("arrjgqx");
    console.log(jgqx);
    this.jgqx = jgqx;
    for (var i = 0; i < this.columns.length; i++) {
      //牌价
      if (jgqx.indexOf("cppj") == -1) {
        if (this.columns[i].title == "牌价") {
          this.columns.splice(i, 1);
        }
      }
      //零售价
      if (jgqx.indexOf("lsj") == -1) {
        if (this.columns[i].title == "零售价") {
          this.columns.splice(i, 1);
        }
      }
      //批发价
      if (jgqx.indexOf("pfj") == -1) {
        if (this.columns[i].title == "批发价") {
          this.columns.splice(i, 1);
        }
      }
      //最低价
      if (jgqx.indexOf("zdj") == -1) {
        if (this.columns[i].title == "最低价") {
          this.columns.splice(i, 1);
        }
      }
      //进货价格
      if (jgqx.indexOf("hsjj") == -1) {
        if (this.columns[i].title == "进货价格") {
          this.columns.splice(i, 1);
        }
      }
      //库存平均进价
      console.log("库存平均进价", jgqx.indexOf("CWYDPJJJ"));
      if (jgqx.indexOf("CWYDPJJJ") == -1) {
        if (this.columns[i].title == "库存平均进价") {
          console.log(this.columns[i].title);

          this.columns.splice(i, 1);
        }
      }
      //核定成本价：
      if (jgqx.indexOf("QYCBJ") == -1) {
        if (this.columns[i].title == "核定成本价") {
          this.columns.splice(i, 1);
        }
      }
    }
    this.getgsbm();
    // 权限价格--限制显示或隐藏---js--结束
  },
  watch: {}
};
</script>

<style lang='less'>
// .xhhzcx_box{
//         .hedlist {
//             position: fixed;
//             z-index: 999;
//             width: 71%;
//             left: 10%;
//             top: 50px;
//             height: 90px;
//             line-height: 60px;
//             background-color: #f3f7f9;
//             .head_box{
//                 width: 100%;
//                 display: flex;
//                 // justify-content: space-around;
//                 background-color: #fff;
//                 flex-wrap: wrap;
//                  .sele{
//                 // margin-bottom: 15px;
//                 margin: 0 20px;
//                 text-align: center;
//                 position: relative;
//                 .sele_input{
//                     width: 170px;
//                 }
//                 .ant-select-auto-complete.ant-select .ant-input{
//                    height: 32px!important;
//                 }
//                 .ant-btn-lg{
//                     height: 32px!important;
//                 }
//                 .search {
//                     position: absolute;
//                     top: 8px;
//                     right: 15px;
//                     font-size: 18px;
//                 }
//             }
//         }

//             .list_head {
//                 display: inline-block;
//                 margin-right: 10px;
//             }
//             .ssgs_box{
//                 display: inline-block;
//                 margin-right: 20px;
//             }
//     }
//      .bcg {
//         width: 90%;
//         background-color: #f3f7f9 !important;
//         position: relative;
//         left: 10%;
//         min-height: 1000px;
//         .xhhzcx_table{
//             position: relative;
//             left: 1%;
//             top:140px;
//             width: 98%;
//             text-align: left;
//             padding: 20px;
//             background: #fff;
//             .slot_hover:hover{
//                 overflow: none;
//             }
//             .ant-table-scroll {
//                 word-break: break-all;
//             }
//             .ant-table-thead {
//                 background-color: #ccc !important;

//             }
//             .ant-table-tbody {
//                 background: #fff !important;
//             }
//             .ant-table-tbody >td.colme{
//                     color: red!important;
//             }
//         }

//         .ant-pagination{
//             float: right!important;
//             margin-top: 20px;
//         }
//     }
//}
</style>